// 防止内存泄漏，因为当切换页面的时候，元素不存在了，但是map存在，就不会被回收
const map = new WeakMap()
const ob = new ResizeObserver((entries)=>{
  for(const entry of entries){
    // 这个元素对应的回调函数
    const handler = map.get(entry.target)
    if(handler){
      console.log(entry)
      // 有些元素可能会生成多个盒子，所以是数组，比如AOI元素
      const box = entry.borderBoxSize[0]
      handler({
        width:box.inlineSize,
        height:box.blockSize
      })
    }
  }
})

export default{
  mounted(el,binding){
    // 监视尺寸变化
    console.log(binding)
    console.log(binding.arg)
    ob.observe(el)
    map.set(el,binding.value)
  },
  unmounted(el){
    // 取消监听
    ob.unobserve(el)
  }
}